// 推荐页面
// 商品详情页
// import Main from '@/layouts/Home/index'
import './index.scss'
import { useEffect, useState, useRef } from 'react';
import { getImit } from '@/api/home';
import { Carousel, Button } from "antd";
import { NavLink } from "react-router-dom";

export default () => {
    /**
     * 列表数据
    */
    const [imitList, getimitlists] = useState([])
    /**
    * 轮播图原点
    * **/
    const [activeIndex, setActiveIndex] = useState(0);

    const curRef = useRef()

    /**
     * 推荐同类列表数据
    */
    const getImitList = async () => {
        try {
            const data = await getImit()
            console.log(data);
            getimitlists(data)
        } catch (error) {

        }
    }
  

    useEffect(() => {
        getImitList()

    }, [])

    return (
        <div className='header'>
            <h3>同类商品推荐</h3>
            <Carousel
                ref={curRef}
                effect="fade"
                slidesToShow={4}
                slidesToScroll={4}
                slidesPerRow={4}
            >
                {imitList.map((item) => (
                    <div className='imit'>
                        <img src={item.picture} alt="" />
                        <div className='imit-p'>
                            <p>{item.name}</p>
                            <span>{item.price}</span>
                        </div>
                    </div>
                ))}
            </Carousel>
        </div >
    )
}